const imgs = ['../assets/img/background1.jpg', '../assets/img/background2.jpg', '../assets/img/background3.jpg', '../assets/img/background4.jpg', '../assets/img/background5.jpg'];

const scrollContainer = document.querySelector('.scroll-container');

let currentIndex = 0;
let isAnimation = false;

const createImages = function (index) {
    const imgUrl = imgs[index];
    const item = document.createElement('div');
    item.classList.add('item');
    item.innerHTML = `<img src="${imgUrl}" />`;
    scrollContainer.appendChild(item);
    return item;
};

const resetImages = function () {
    scrollContainer.innerHTML = '';
    const prevIndex = currentIndex - 1 < 0 ? imgs.length - 1 : currentIndex - 1;
    const nextIndex = currentIndex + 1 > imgs.length - 1 ? 0 : currentIndex + 1;
    createImages(prevIndex).classList.add('prev');
    createImages(currentIndex).classList.add('current');
    createImages(nextIndex).classList.add('next');
};

resetImages();

scrollContainer.addEventListener('wheel', e => {
    if (!e.deltaY) return;
    if (isAnimation) return;
    isAnimation = true;
    if (e.deltaY > 0) {
        scrollContainer.classList.add('scroll-down');
        currentIndex = currentIndex + 1 > imgs.length - 1 ? 0 : currentIndex + 1;
    }
    else {
        scrollContainer.classList.add('scroll-up');
        currentIndex = currentIndex - 1 < 0 ? imgs.length - 1 : currentIndex - 1;
    }
});

scrollContainer.addEventListener('transitionend', () => {
    isAnimation = false;
    scrollContainer.classList.remove('scroll-down');
    scrollContainer.classList.remove('scroll-up');
    resetImages();
});